<template>
    <div id="detail">
        <detail-nav-bar class="detail-nav" ref="scroll"/>
        <scroll class="content">
            <detail-swiper :top-images="topImages"></detail-swiper>
            <detail-base-info :goods="goods"></detail-base-info>
            <detail-shop-info :shop="shop"></detail-shop-info>
            <detail-goods-info :detailInfo="detailInfo" @imgLoad="imgLoad"></detail-goods-info>
            <detail-param-info :paramInfo="paramInfo"></detail-param-info>
            <detail-comment-info :commentInfo="commentInfo"></detail-comment-info>
            <goods-list :goods="recommends"></goods-list>
        </scroll>
    </div>
</template>
           
        
        

<script>
import DetailNavBar from "./childComps/DetailNavBar.vue";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from './childComps/DetailBaseInfo';
import DetailShopInfo from './childComps/DetailShopInfo';
import DetailGoodsInfo from './childComps/DetailGoodsInfo';
import DetailParamInfo from './childComps/DetailParamInfo.vue';
import DetailCommentInfo from './childComps/DetailCommentInfo.vue';


import Scroll from '@/components/commom/scroll/Scroll'
import { getDatila, Goods, Shop, GoodsParam, getRecommend} from "network/detail";
import GoodsList from '../../components/content/goods/GoodsList.vue';






export default {
    name: "Detail",
    components: {
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailParamInfo,
        DetailCommentInfo,
        Scroll,
        GoodsList
        
    },
    data() {
        return {
            iid: null,
            topImages:[],
            goods: {},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{},
            recommends:[]
        };
    },
    created() {
        // 1.保存传入的iid
        this.iid = this.$route.params.iid;
        // 2.获取iid里的信息
        getDatila(this.iid).then((res) => {

            // console.log(res);
            const data = res.result
            // console.log(res.result.itemInfo.topImages);
            // 1.获取轮播图信息
           this.topImages = data.itemInfo.topImages
            // 2.获取详情的信息
            this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo)
            // 3.创建店铺信息
            this.shop = new Shop(data.shopInfo)
            // 4.保存商品的详情数据
            this.detailInfo = data.detailInfo
            // 5.获取参数的信息
            this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
            // 6.取出评论信息
            if(data.rate.cRate !== 0){
                this.commentInfo = data.rate.list[0]
            }
        });
        getRecommend().then(res => {
            this.recommends = res.data.list
        })
    },
    methods:{
        imgLoad(){
            this.$refs.scroll.refresh()
        }
    }
};
</script>

<style scoped>
#detail{
    position: relative;
    z-index: 100;
    background-color: #fff;
    height: 100vh;
}
.detail-nav{
    position: relative;
    z-index: 9;
    background-color: #fff;
}
.content{
    height: calc(100% - 44px);
}
</style>